<template>
	<view class="order_detail_page" v-if="orderData">
		<navbar :title="navTitle[order_status]"></navbar>
		<!-- 订单状态 -->
		
		<view class="top-status">
			<text v-if="order_status==7" style="color: #FF4A4A;">已取消订单</text>
			<text v-if="order_type==2&&order_status==2" style="color: #333333;">成功后发货</text>
			<text v-if="order_status==1" class="wait-pay">剩<text>{{cencalTime}}</text>支付关闭</text>
		</view>
		
		
		<view class="detail_content">
			
				
			<view class="order-status" v-if="(order_type==1&&(order_status==2||order_status==3))||(order_type==2&&(order_status==3||order_status==4))">
				<view class="Info" @click="toUrl('/pagesMine/shopGoodsOrder/logistics/logistics?id=' + order_id)">
					<text>详情</text>
					<image :src="$img_path('/mine/r_img.png')" mode="widthFix"></image>
				</view>
				<wStatus>
					<text slot="title">{{orderData.logistics.status}}</text>
					<view slot="text" class="slot-text more-row" :style="{'--row-num':2}">
						<!-- {{orderData.state==2 ? '商品已下单，商家备货中' : ''}} -->
						{{orderData.logistics.context}}
					</view>
				</wStatus>
				<wStatus :isLine="false" :check="false">
					<text slot="title">{{orderData.address.address.split('/').join(' ')}}</text>
					<view slot="text" class="slot-text">
						{{orderData.address.name}} {{orderData.address.mobile}}
					</view>
				</wStatus>
			</view>

			<view class="order_item_box call_address_box" v-if="(order_type==1&&order_status==1)||(order_type==2&&(order_status==1||order_status==2))">
				<view class="left">
					<view class="call_address" v-if="orderData.address">
						<text>{{orderData.address.address.split('/')[0]}}</text>
						<text>{{orderData.address.address.split('/')[1]}}</text>
						<text>{{orderData.address.address.split('/')[2]}}</text>
						<!-- <text>林山寨街道</text> -->
					</view>
					<view class="call_deatil_address">{{orderData.address.address.split('/')[3]}}</view>
					<view class="call_user">
						<text>{{orderData.address.name}}</text>
						<text>{{orderData.address.mobile}}</text>
					</view>
				</view>
				<view class="right">
					<button class="edit-address" @click="editAddress">修改</button>
				</view>
			</view>
			
			<view class="pin-box" v-if="order_type==2&&order_status==2">
				<view class="user-box">
					<view class="avatar">
						<view class="mine">
							<image :src="$img_base_url(orderData.groupinfo.team[0].user.avatar)" mode="aspectFill"></image>
						</view>
						<view class="p-user">
							<image v-for="(item,i) in orderData.groupinfo.team.slice(1)" :src="$img_base_url(item.user.avatar)" mode="aspectFill"></image>
							<!-- <image :src="$img_path('/pagesMine/13.png')" mode="aspectFill"></image> -->
						</view>
					</view>
					<view class="time">
						<text v-if="orderData.groupinfo.validitytime > $dayjs().unix()">距离结束还剩</text>
						<wanl-timeout :endTime="orderData.groupinfo.validitytime" color="#333333" backgroundColor="#ffffff"
							borderColor="#ffffff" padding="0" margin="0" />
					</view>
				</view>
				<view class="btn">
					<button @click="shareGroup" open-type="share">邀请好友参团</button>
				</view>
			</view>


			<view class="goods-box">
				<view class="g-item" v-for="(item,i) in orderData.goods" :key="item.id">
					<view class="order_item_box flex_ac_jsb">
						<image class="service_image" :src="$img_base_url(item.image)" mode="aspectFill"></image>
						<view class="service_content">
							<view class="service_top flex_ac_jsb">
								<view class="service_top_name one-row">{{item.title}}</view>
								<view class="service_top_price_box">
									<text class="service_top_price_icon">￥</text>
									<text class="service_top_price">{{item.price}}</text>
								</view>
							</view>
							<view class="service_bottom flex_ac_jsb">
								<view class="service_bottom_name">{{item.difference}}</view>
								<view class="service_bottom_num">
									x {{item.number}}
								</view>
							</view>
						</view>
					</view>
					
					<view class="btn yqx" v-if="orderData.state==7"><!-- 已取消 -->
						<button class="red" @click="againOrder">再来一单</button>
					</view>
					<view class="btn dfh" v-if="(order_type==1&&order_status>=2&&orderData.state!=7)||(order_type==2&&order_status>=3&&orderData.state!=7)"><!-- 待发货 -->
						<button class="red" @click="againOrder">再来一单</button>
						<button class="black" @click="applyRetuen(item)">申请售后</button>
					</view>
				</view>
			</view>
			
			<view class="order_item_box">
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">商品总价</view>
					<view class="service_item_price">
						￥{{orderData.pay.price}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">订单运费</view>
					<view class="service_item_price">
						￥{{orderData.pay.freight_price}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">优惠券</view>
					<view class="service_item_price" style="color: #FF4A4A;">-￥{{orderData.pay.discount_price}}</view>
				</view>
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">实付款</view>
					<view class="service_item_price">
						￥{{orderData.pay.actual_payment}}
					</view>
				</view>
			</view>

			<view class="order_item_box">
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">订单编号</view>
					<view class="service_item_price">
						{{orderData.order_no}}
						<text style="margin:0 8rpx;">|</text>
						<text @click="clickCopy(orderData.order_no)">复制</text>
					</view>
				</view>
				
				<view class="flex_ac_jsb service_item" v-if="orderData.state==4||orderData.state==6">
					<view class="service_item_name">收货人信息</view>
					<view class="service_item_price">
						{{orderData.address.name}},{{orderData.address.mobile}},{{orderData.address.address.split('/').join('')}}
					</view>
				</view>
				
				<view class="flex_ac_jsb service_item">
					<view class="service_item_name">下单时间</view>
					<view class="service_item_price">
						{{orderData.createtime_text}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" v-if="orderData.state>1&&orderData.state<7">
					<view class="service_item_name">支付方式</view>
					<view class="service_item_price">
						{{orderData.pay.pay_type==0 ? '余额支付' : orderData.pay.pay_type==1 ? '微信支付' : '支付宝支付'}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" v-if="orderData.state>1&&orderData.state<7">
					<view class="service_item_name">付款时间</view>
					<view class="service_item_price">
						{{orderData.paymenttime_text}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" v-if="orderData.state==4||orderData.state==6">
					<view class="service_item_name">发货时间</view>
					<view class="service_item_price">
						{{orderData.delivertime_text}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" v-if="orderData.state==4||orderData.state==6">
					<view class="service_item_name">成交时间</view>
					<view class="service_item_price">
						{{orderData.taketime_text}}
					</view>
				</view>
				<view class="flex_ac_jsb service_item" style="align-items: flex-start;">
					<view class="service_item_name">订单留言</view>
					<view class="service_item_price order_remark">
						{{orderData.remarks || '无'}}
					</view>
				</view>
			</view>


		</view>

		<!-- 订单已取消显示 -->
		<view class="item_btn_box" v-if="order_status==7">
			<button class="w-180 black-btn" @click="delOrder">删除订单</button>
			<button class="w-180 red-btn" @click="againOrder">再来一单</button>
		</view>
		
		<!-- 订单待支付显示 -->
		<view class="item_btn_box" v-if="order_status==1">
			<button class="w-180 black-btn" @click="cancelOrder">取消订单</button>
			<button class="w-180 black-btn" @click="editAddress">修改地址</button>
			<button class="w-270 c-btn" @click="$refs.pay.open()">去支付</button>
		</view>
		
		<!-- 订单待发货显示 -->
		<view class="item_btn_box" v-if="(order_type==1&&order_status==2)||(order_type==2&&order_status==3)">
			<button class="w-180 black-btn" @click="againOrder">再来一单</button>
			<button class="w-180 black-btn" @click="editAddress">修改地址</button>
			<button class="w-180 red-btn" @click="CFclick">催发货</button>
		</view>
		
		<!-- 订单待发货显示 -->
		<view class="item_btn_box" v-if="(order_type==1&&order_status==3)||(order_type==2&&order_status==4)">
			<button class="w-180 black-btn" @click="againOrder">再来一单</button>
			<button class="w-180 black-btn">查看物流</button>
			<button class="w-180 c-btn" @click="receiptGoods">确认收货</button>
		</view>
		<!-- 订单待发货显示 -->
		<view class="item_btn_box" v-if="(order_type==1&&order_status==4)||(order_type==2&&order_status==5)">
			<button class="w-180 black-btn" @click="delOrder()">删除订单</button>
			<button class="w-180 black-btn">查看物流</button>
			<button class="w-180 black-btn" @click="againOrder">再来一单</button>
			<button class="w-180 red-btn" @click="toUrl('/pagesMine/shopGoodsOrder/evaluate/evaluateGoods?id='+order_id)">去评价</button>
		</view>
		
		
		
		<!-- 支付 -->
		<popupBox ref="pay" type="bottom" :isSlot="true">
			<view class="pay-box">
				<view class="top">
					<image :src="$img_path('/course/close_popup.png')" @click="$refs.pay.close()" mode="widthFix"></image>
				</view>
				<view class="price">
					<view class="num">
						<text>￥</text>{{orderData.pay.price}}
					</view>
				</view>
				<view class="pay-type">
					<view class="item" @click="checkPayType(0)">
						<view class="left">
							<image :src="$img_path('/course/pay_1.png')" mode="widthFix"></image>
							<view class="name">
								<text>微信支付</text>
							</view>
						</view>
						<view class="right">
							<image v-if="pay_type==0" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
					<!-- <view class="item">
						<view class="left">
							<image :src="$img_path('/course/pay_2.png')" mode="widthFix"></image>
							<view class="name">
								<text>第三方支付</text>
							</view>
						</view>
						<view class="right">
							<image v-if="false" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view> -->
					<view class="item" @click="checkPayType(2)">
						<view class="left">
							<image :src="$img_path('/course/pay_3.png')" mode="widthFix"></image>
							<view class="name">
								<text>余额</text>
								<text>余额：¥ {{Balance}}</text>
							</view>
						</view>
						<view class="right">
							<image v-if="pay_type==2" :src="$img_path('/course/pay_checkbox1.png')" mode="widthFix"></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode="widthFix"></image>
						</view>
					</view>
				</view>
				
				<view class="btn">
					<view class="b-box">
						<button @click="payOrder">确认支付</button>
					</view>
				</view>
			</view>
		</popupBox>
		
		<!-- 取消原因 -->
		<popupBox ref="cancelOrder" type="bottom" :isSlot="true">
			<view class="cancel-box">
				<view class="title">
					<text>选择取消原因</text>
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="list">
					<view class="item" v-for="item in 9">
						<view class="text">
							取消原因内容取消原因内容
						</view>
						<view class="r-img">
							<image v-if="true" :src="$img_path('/course/pay_checkbox1.png')" mode=""></image>
							<image v-else :src="$img_path('/course/pay_checkbox2.png')" mode=""></image>
						</view>
					</view>
				</view>
				
				<view class="btn">
					<button class="b-1" @click="$refs.cancelOrder.close()">我再想想</button>
					<button class="b-2">确认取消</button>
				</view>
			</view>
		</popupBox>
		
		<!-- 催发货 -->
		<popupBox ref="cuifa" type="bottom" :isSlot="true">
			<view class="cancel-box cui">
				<view class="title">
					<text>通知</text>
					<image :src="$img_path('/course/close_popup.png')" mode="widthFix"></image>
				</view>
				<view class="content">
					<image :src="$img_path('/course/pay_s.png')" mode="widthFix"></image>
					<view>已告知商家尽快发货</view>
				</view>
				
				<view class="btn">
					<button @click="$refs.cuifa.close()">我知道了</button>
				</view>
			</view>
		</popupBox>
	</view>
</template>

<script>
	const FormData = require('@/utils/formdata/index.js')
	import { 
		goodsOrderInfo,
		getBalance,
		orderPayment,
		receiptGoods,
		delOrder,
		groupsGetOrderInfo,
		cancelOrder
	} from '@/utils/api/mallApi.js'
	import {
		getCopy
	} from '@/utils/uni_api.js'
	import wanlTimeout from '@/components/wanl-timeout/wanl-timeout.vue'
	import popupBox from '@/components/popup/popup.vue';
	import wStatus from './components/w-status.vue';
	export default {
		components:{
			popupBox,
			wStatus,
			wanlTimeout
		},
		data() {
			return {
				order_type:1,
				order_status:'1',
				order_id:null,
				navTitle:{},
				ptTitle:{
					'1':'待支付',
					'2':'待发货',
					'3':'待收货',
					'4':'交易完成',
					'5':'售后',
					'6':'交易完成',
					'7':'订单已取消',
				},
				groupsTitle:{
					'1':'待支付',
					'2':'待成团',
					'3':'待发货',
					'4':'待收货',
					'5':'交易完成',
					'6':'交易完成',
					'7':'订单已取消',
				},
				curStep: 3,
				stepList: [{
						name: '提交申请',
						status: 1,
					},
					{
						name: '平台处理',
						status: 2,
					},
					{
						name: '平台退款',
						status: 3,
					},
					{
						name: '退款成功',
						status: 4,
					}
				],
				cencalTime:null,
				orderData:null,
				
				pay_type:'0',//0 wx,1 other, 2 余额
				
				Balance:0,
			}
		},
		onLoad(options) {
			this.order_type = options.order_type
			this.order_status = options.order_status
			this.order_id = options.id
			if(options.order_type==1){
				this.navTitle = this.ptTitle
				this.getOrderInfo()
			}else{
				this.navTitle = this.groupsTitle
				this.groupsOrderInfo()
			}
			this.getBalance()
		},
		onShow() {
			
		},
		methods: {
			// 删除订单
			delOrder(){
				let formData = new FormData()
				formData.append('id',this.order_id)
				delOrder(formData.getData()).then(res=>{
					uni.showToast({
						title: '删除成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			// 获取账户余额
			getBalance(){
				getBalance().then(res=>{
					this.Balance = res.data
				})
			},
			checkPayType(type){
				this.pay_type = type
			},
			
			// 普通订单
			getOrderInfo(){
				let formData = new FormData()
				formData.append('id',this.order_id)
				uni.showLoading()
				// goodsOrderInfo(formData.getData()).then(res=>{
				goodsOrderInfo({id:this.order_id}).then(res=>{
					uni.hideLoading()
					// console.log(res,'--')
					this.order_status = res.data.state
					this.orderData = res.data
					if(res.data.state==1){
						this.dateFormat(res)
					}
				})
			},
			
			// 拼团订单
			groupsOrderInfo(){
				let formData = new FormData()
				formData.append('id',this.order_id)
				groupsGetOrderInfo(formData.getData()).then(res=>{
					uni.hideLoading()
					// console.log(res,'--')
					this.order_status = res.data.state
					this.orderData = res.data
					if(res.data.state==1){
						this.dateFormat(res)
					}
				})
			},
			
			dateFormat(res){
				
					var diff = (res.data.createtime + Number(res.data.config.cancel) * 86400) - Date.parse(new Date()) / 1000;
					var days = Math.floor(diff / 86400);
					var hours = Math.floor(diff % 86400 / 3600); 
					var minutes = Math.floor(diff % 86400 % 3600 / 60);
					if (minutes > 0) {
						// this.orderData.statetime = '还剩' +minutes+ '分自动关闭订单';
						this.cencalTime = minutes
					}
					if (hours > 0) {
						// this.orderData.statetime = '还剩' +hours+ '天' +minutes+ '分自动关闭订单';
						this.cencalTime = hours+ '天' +minutes
					}
					if (days > 0) {
						// this.orderData.statetime = '还剩' +days+ '天' +hours+ '小时' +minutes+ '分自动关闭订单';
						this.cencalTime = days+ '天' +hours+ '小时' +minutes
					}
					setInterval(()=>{
						if (minutes > 0) {
							// this.orderData.statetime = '还剩' +minutes+ '分自动关闭订单';
							this.cencalTime = minutes
						}
						if (hours > 0) {
							// this.orderData.statetime = '还剩' +hours+ '天' +minutes+ '分自动关闭订单';
							this.cencalTime = hours+ '天' +minutes
						}
						if (days > 0) {
							// this.orderData.statetime = '还剩' +days+ '天' +hours+ '小时' +minutes+ '分自动关闭订单';
							this.cencalTime = days+ '天' +hours+ '小时' +minutes
						}
					},60000)
			},
			
			CFclick(){
				uni.showLoading()
				setTimeout(()=>{
					uni.hideLoading()
					this.$refs.cuifa.open()
				},1000)
			},
			
			clickCopy(text) {
				getCopy(text)
			},
			
			
			editAddress(){
				uni.navigateTo({
					url:`/pagesMine/shopGoodsOrder/editAddress/editAddress?id=${this.orderData.id}&address_id=${this.orderData.address.id}`
				})
			},
			
			// 确认收货 receiptGoods
			receiptGoods(){
				uni.showLoading()
				receiptGoods({
					id:this.order_id
				}).then(res=>{
					uni.hideLoading()
					this.getOrderInfo()
				})
			},
			
			// 支付
			payOrder(){
				orderPayment({
					order_id:this.order_id,
					type:this.pay_type==2 ? 'balance' :this.pay_type==0 ? 'wechat' : '',
				}).then(res=>{
					uni.hideLoading()
					this.$refs.pay.close()
					if(this.pay_type==2){
						this.getOrderInfo()
					}else{
						uni.requestPayment({
							
						})
					}
				})
			},
			
			againOrder(){
				// id=1&data=[{"sku_id":"15","number":"1","goods_id":"1"}]
				// let goods = this.orderData.goods
				// let arr = []
				// goods.forEach(e=>{
				// 	if(this.order_type==1){
				// 		arr.push({
				// 			goods_id:e.goods_id,
				// 			number:e.number,
				// 			sku_id:e.sku_id
				// 		})
				// 	}else{
				// 		arr.push({
				// 			goods_id:e.goods_id,
				// 			number:e.number,
				// 			sku_id:e.sku_id
				// 		})
				// 	}
					
				// })
				if(this.order_type==1){
					uni.navigateTo({
						url:`/pagesMall/goods/detail?id=${this.orderData.goods[0].goods_id}`
					})
				}else{
					uni.navigateTo({
						url:`/pagesMall/group_buying/detail?id=${this.orderData.goods[0].goods_id}`
					})
				}
				
			},
			
			cancelOrder(){
				uni.showLoading()
				cancelOrder({
					id:this.order_id
				}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'取消成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			
			// 删除订单
			delOrder(){
				uni.showLoading()
				delOrder({
					id:this.order_id
				}).then(res=>{
					uni.hideLoading()
					uni.showToast({
						title:'删除成功',
						icon:'none'
					})
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				})
			},
			
			toUrl(url){
				uni.navigateTo({
					url
				})
			},
			
			applyRetuen(data){
				uni.navigateTo({
					url:`/pagesMine/shopGoodsOrder/apply_return/select_type?goods=${JSON.stringify(data)}&order_type=${this.order_type}&order_id=${this.order_id}`
				})
			},
			
			// 邀请好友拼团
			shareGroup(){
				
			}
		},
		onShareAppMessage() {
			// if (res.from === 'button') {// 来自页面内分享按钮
			//     console.log(res.target)
			// }
			return {
			    title: '拼团活动',
				imageUrl:this.$img_base_url(this.orderData.goods[0].image),
			    path: `pagesMine/shopGoodsOrder/groupOrder/groupOrder?group_no=${this.orderData.groupinfo.group_no}`
			}
		}
	}
</script>

<style scoped lang="scss">
@import 'detail.scss'
</style>